{extend name="_/layout" /}

{block name="body"}
<section class="content">
    <div class="container-fluid">
    
        <div class="block-header">概览</div>
        
        <div class="row clearfix">
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <div class="info-box bg-pink hover-expand-effect">
                    <div class="icon"><i class="material-icons">playlist_add_check</i></div>
                    <div class="content">
                        <div class="text">新入驻企业</div>
                        <div class="number count-to" data-from="0" data-to="125" data-speed="15" data-fresh-interval="20">125</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <div class="info-box bg-cyan hover-expand-effect">
                    <div class="icon"><i class="material-icons">help</i></div>
                    <div class="content">
                        <div class="text">新注册用户</div>
                        <div class="number count-to" data-from="0" data-to="257" data-speed="1000" data-fresh-interval="20">257</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <div class="info-box bg-light-green hover-expand-effect">
                    <div class="icon"><i class="material-icons">forum</i></div>
                    <div class="content">
                        <div class="text">新销售订单</div>
                        <div class="number count-to" data-from="0" data-to="243" data-speed="1000" data-fresh-interval="20">243</div>
                    </div>
                </div>
            </div>
            <div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
                <div class="info-box bg-orange hover-expand-effect">
                    <div class="icon"><i class="material-icons">person_add</i></div>
                    <div class="content">
                        <div class="text">新访问客户</div>
                        <div class="number count-to" data-from="0" data-to="1225" data-speed="1000" data-fresh-interval="20">1225</div>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="row clearfix">
            <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="card">
                    <div class="header">
                        <h2>CPU 使用量 (%)</h2>
                        <div class="pull-right">
                            <div class="switch panel-switch-btn">
                                <span class="m-r-10 font-12">实时显示</span>
                                <label>关<input type="checkbox" id="realtime" checked><span class="lever switch-col-cyan"></span>开</label>
                            </div>
                        </div>
                    </div>
                    <div class="body">
                        <div id="real_time_chart" class="dashboard-flot-chart"></div>
                    </div>
                </div>
            </div>
        </div>
        
    </div>
</section>
{/block}

{block name="script"}
<script src="__PLUGIN__/jquery-countto/jquery.countTo.js"></script>
<script src="__PLUGIN__/flot-charts/jquery.flot.js"></script>
<script src="__PLUGIN__/flot-charts/jquery.flot.resize.js"></script>
<script>
$(function(){
    var realtime = 'on', data = [], totalPoints = 110;
    var getRandomData = function () {
        if (data.length > 0) data = data.slice(1);
        while (data.length < totalPoints) {
            var prev = data.length > 0 ? data[data.length - 1] : 50, y = prev + Math.random() * 10 - 5;
            if (y < 0) { y = 0; } else if (y > 100) { y = 100; }
            data.push(y);
        }
        var res = [];
        for (var i = 0; i < data.length; ++i) {
            res.push([i, data[i]]);
        }
        return res;
    }
    var initRealTimeChart = function () {
        var plot = $.plot('#real_time_chart', [
            getRandomData()
        ], {
            series: {
                shadowSize: 0,
                color: 'rgb(0, 188, 212)'
            },
            grid: {
                borderColor: '#f3f3f3',
                borderWidth: 1,
                tickColor: '#f3f3f3'
            },
            lines: {
                fill: true
            },
            yaxis: {
                min: 0,
                max: 100
            },
            xaxis: {
                min: 0,
                max: 100
            }
        });
        var updateRealTime = function () {
            plot.setData([
                getRandomData()
            ]);
            plot.draw();
            var timeout;
            if (realtime === 'on') {
                timeout = setTimeout(updateRealTime, 320);
            } else {
                clearTimeout(timeout);
            }
        }
        updateRealTime();
        $('#realtime').on('change', function() {
            realtime = this.checked ? 'on' : 'off';
            updateRealTime();
        });
    }
    initRealTimeChart();  
});
</script>
{/block}